/*
 * @Author: wsf
 * @Date: 2019-02-20 16:14:17
 * @LastEditors: wsf
 * @LastEditTime: 2019-08-12 13:55:43
 * @Description: 
 */
import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import "./MWrapper.less"


import MCarousel from "../MComponent/MCarousel"
import MGrid from "../MComponent/MGrid"
import MListViewNormal from "../MComponent/MListViewNormal"
import MSearchTabs from "../MComponent/MSearchTabs"
import MSeniorSearch from "../MComponent/MSeniorSearch"
import MListView from "../MComponent/MListView"
import MTitle from "../MComponent/MTitle"
import { getWindow, isNull } from "../../utils/helper"
import MiRate from "../MForm/MiRate"
import MiInput from "../MForm/MiInput"
import MiInputNumber from "../MForm/MiInputNumber"
import MiInputTel from "../MForm/MiInputTel"
import MiText from "../MForm/MiText"
import MiLine from "../MForm/MiLine"
import MiTextMap from "../MForm/MiTextMap"
import MiTextTel from "../MForm/MiTextTel"
import MiGroup from "../MForm/MiGroup"
import MiTextarea from "../MForm/MiTextarea"
import MiSelect from "../MForm/MiSelect"
import MiSelectMore from "../MForm/MiSelectMore"
import MiSelectMoreOther from "../MForm/MiSelectMoreOther"
import MiSelectOther from "../MForm/MiSelectOther"
import MiSelectContacts from "../MForm/MiSelectContacts"
import MiSwitch from "../MForm/MiSwitch"
import MiRadioGroup from "../MForm/MiRadioGroup"
import MiDatePicker from "../MForm/MiDatePicker"
import MiDatetime from "../MForm/MiDatetime"
import MiTime from "../MForm/MiTime"
import MiUploadImg from "../MForm/MiUploadImg"
import MiTimeline from "../MForm/MiTimeline"
import MiFulltext from "../MForm/MiFulltext"
import MiBox from "../MForm/MiBox"
import MiLineBar from "../MCharts/MiLineBar"
import MiArea from "../MCharts/MiArea"
import MiPie from "../MCharts/MiPie"
import MiGauge from "../MCharts/MiGauge"
import MiHtmlCard from "../MForm/MiHtmlCard"
import MiProgress from '../MForm/MiProgress';
import MiMiniList from '../MForm/MiMiniList';
import MiChartCard from '../MForm/MiChartCard';
import MiMiniArea from '../MForm/MiMiniArea';
import MiMiniBar from '../MForm/MiMiniBar';
import MiMiniProgress from '../MForm/MiMiniProgress';
import MiMiniPie from '../MForm/MiMiniPie';
import MiMiniRing from '../MForm/MiMiniRing';
import MiMiniRadar from '../MForm/MiMiniRadar';
import MiMiniSubProgress from '../MForm/MiMiniSubProgress';
import MiSelectDisplay from '../MForm/MiSelectDisplay';
import MiSelectMoreDisplay from '../MForm/MiSelectMoreDisplay';
import MiImage from '../MForm/MiImage';
import MiInputNumberClick from '../MForm/MiInputNumberClick';
import MiInputNumberModal from '../MForm/MiInputNumberModal';
import MiDatePickerFooter from '../MForm/MiDatePickerFooter';
import MiDatePickerClick from "../MForm/MiDatePickerClick";
import MiDatePickerClickData from '../MForm/MiDatePickerClickData';
import MiDatePickerScroll from "../MForm/MiDatePickerScroll";
import MiButton from '../MForm/MiButton.tsx';
import getDataSource from '../MDatasource';
import MiDataSendBox from '../MForm/MiDataSendBox';
import MiDataReceiveBox from '../MForm/MiDataReceiveBox';
import MiCurrentTime from '../MForm/MiCurrentTime';
import MiSelectAddress from "../MForm/MiSelectAddress"

import { Button } from 'antd-mobile';
import MiQrcode from '../MForm/MiQrcode';
import MiTrackMap from "../Map/MiTrackMap"

let comArr = {
	"mi-carousel": MCarousel,
	"mi-grid": MGrid,
	"mi-listview-normal": MListViewNormal,
	"mi-search-tabs": MSearchTabs,
	"mi-senior-search": MSeniorSearch,
	"mi-listview": MListView,
	"mi-title": MTitle,
	"mi-rate": MiRate,
	"mi-input": MiInput,
	"mi-input-number": MiInputNumber,
	"mi-input-tel": MiInputTel,
	"mi-text": MiText,
	"mi-line": MiLine,
	"mi-text-map": MiTextMap,
	"mi-text-tel": MiTextTel,
	"mi-group": MiGroup,
	"mi-textarea": MiTextarea,
	"mi-select": MiSelect,
	"mi-select-more": MiSelectMore,
	"mi-select-more-other": MiSelectMoreOther,
	"mi-select-other": MiSelectOther,
	"mi-select-contacts": MiSelectContacts,
	"mi-switch": MiSwitch,
	"mi-radio-group": MiRadioGroup,
	"mi-datepicker": MiDatePicker,
	"mi-datetime": MiDatetime,
	"mi-time": MiTime,
	"mi-line-bar": MiLineBar,
	"mi-area": MiArea,
	"mi-pie": MiPie,
	"mi-gauge": MiGauge,
	"mi-upload-img": MiUploadImg,
	"mi-timeline": MiTimeline,
	"mi-fulltext": MiFulltext,
	"mi-box": MiBox,
	"mi-html-card": MiHtmlCard,
	"mi-progress": MiProgress,
	"mi-mini-list": MiMiniList,
	"mi-chartcard": MiChartCard,
	"mi-miniarea": MiMiniArea,
	"mi-minibar": MiMiniBar,
	"mi-miniprogress": MiMiniProgress,
	"mi-mini-subprogress": MiMiniSubProgress,
	"mi-minipie": MiMiniPie,
	"mi-miniring": MiMiniRing,
	"mi-miniradar": MiMiniRadar,
	"mi-select-display": MiSelectDisplay,
	"mi-select-more-display": MiSelectMoreDisplay,
	"mi-image": MiImage,
	"mi-input-number-click": MiInputNumberClick,
	"mi-input-number-modal": MiInputNumberModal,
	"mi-datepicker-footer": MiDatePickerFooter,
	"mi-datepicker-click": MiDatePickerClick,
	"mi-datepicker-click-data": MiDatePickerClickData,
	"mi-datepicker-scroll": MiDatePickerScroll,
	"mi-button": MiButton,
	"mi-datasendbox": MiDataSendBox,
	"mi-datareceivebox": MiDataReceiveBox,
	"mi-current-time":MiCurrentTime,
	"mi-select-address":MiSelectAddress,
	"mi-qrcode":MiQrcode,
	"mi-track-map":MiTrackMap,
}
export default class MWrapper extends PureComponent {

	constructor(props) {
		super(props);
		this.timer = null;
		let { isSearch } = props;
		this.state = {
			show: isSearch,
		}
	}

	static propTypes = {
	}

	isShow = () => {//判断组件是否在可视范围内 如果不在就不请求数据
		let { height } = getWindow();
		let obj = this.com.getBoundingClientRect();
		let { dataset_key, component_type, auto_load, auto_load_sec } = this.props;
		auto_load_sec = isNull(auto_load_sec) ? 5 : auto_load_sec
		let { top } = obj;

		// if (true||top < height) {
		if (top < height) {
			this.setState({
				show: true
			})
			document.getElementById("root").removeEventListener("scroll", this.isShow, false)
			window.removeEventListener("scroll", this.isShow, false)
			//下拉刷新的外部容器滚动时的监听
			try {
				document.getElementsByClassName("am-pull-to-refresh")[0].removeEventListener("scroll", this.isShow, false);
			} catch (e) {

			}
		}
	}

	watchStr(arr, oldFD = {}, newFD = {}) {
		let oldStr = "", newStr = "";
		if (!arr || arr.length == 0) {
			return false
		}
		else {
			arr.map(item => {
				let key = item.store_field || item.key;
				oldStr += "," + oldFD[key];
				newStr += "," + newFD[key];
			});
		}
		return oldStr !== newStr
	}
	componentWillReceiveProps(next) {
		const { api_list, use_api_list } = next;
		if (use_api_list == 1) {
			let oldFD = this.props.formData || {};
			let newFD = next.formData || {};
			let { refreshing: oldRefreshing } = this.props;
			let { refreshing: newRefreshing } = next;
			let { source_type } = api_list || {};
			//如果source_type==="option" 就不监听formData
			// refreshing 变化的时候也会触发刷新 
			//如果使用组件内部的数据源，并且source_type为server，就监听data_store变化
			if (source_type === "server" && ((oldRefreshing !== newRefreshing && newRefreshing) || this.watchStr(api_list.params, oldFD, newFD))) {
				getDataSource({
					...next,
					ds: api_list,
					callback: (data) => {
						this.setState({
							list: data
						})
					}
				})
			}
		}
	}
	componentWillMount() {
		let { use_api_list, api_list } = this.props;
		if (use_api_list == 1) {//使用内部数据源 需要配置api_list
			getDataSource({
				...this.props, ds: api_list, callback: (data) => {
					this.setState({
						list: data
					})
				}
			})
		}
	}
	componentDidMount() {
		let { isSearch, dataset_key, component_type } = this.props;
		if (!isSearch) {//如果不是搜索form
			this.isShow();
			document.getElementById("root").addEventListener("scroll", this.isShow, false);
			window.addEventListener("scroll", this.isShow, false);
			try {
				//下拉刷新的外部容器滚动时的监听
				document.getElementsByClassName("am-pull-to-refresh")[0].addEventListener("scroll", this.isShow, false);
			}
			catch (e) {

			}
		}
	}


	componentDidUpdate() {

	}

	render() {
		let { component_type, fd, dataset_key, margin_t = 0, margin_b = 1, com_key, use_api_list, parent_com,dispatch } = this.props;
		let { show } = this.state;
		show=true;
		let Com = comArr[component_type];
		let list = fd[dataset_key];
		if (use_api_list == 1) {//使用内部数据源
			list = this.state.list
		}
		let content = "";

		//mi-listview组件的数据请求 在mi-listview组件内部自行处理 不通过MWrapper组件
		if (show && component_type == "mi-listview") {
			content = <Com {...this.props} />
		}
		else if (show && use_api_list == 1) {
			content = <Com {...this.props} list={list} />
		}
		else if (show && isNull(dataset_key)) {
			content = <Com {...this.props} />
		}
		// else if(show&&!isNull(dataset_key)&&!isNull(list)&&list instanceof Array){
		else if (show && !isNull(dataset_key) && !isNull(list)) {
			content = <Com {...this.props} list={list} />
		}
		else {
			// content=<Com {...this.props} list={[]}/>
			content = <Com {...this.props} list={[]} />
		}
		return (
			<div ref={e => this.com = e} className={"mi-mwrapper " + com_key + "_" + component_type} style={{ marginBottom: margin_b + "px", marginTop: margin_t + "px" }}>
				{/* {
					 <div className="operation">
						<Button 
							onClick={()=>{
								console.log(this.props)
								dispatch({
									type:"fd/setState",
									payload:{
										config:{}
									}
								})
							}}
						>11111</Button>
					</div>
				} */}

				{content}
			</div>
		)
	}

	componentWillUnmount() {
		clearInterval(this.timer);
		document.getElementById("root").removeEventListener("scroll", this.isShow, false)
		window.removeEventListener("scroll", this.isShow, false);
		//下拉刷新的外部容器滚动时的监听
		try {
			document.getElementsByClassName("am-pull-to-refresh")[0].removeEventListener("scroll", this.isShow, false);
		} catch (e) {
		}
	}
}